import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:squat_easy/generated/assets.dart';
import 'package:squat_easy/se_db/se_db_entity.dart';
import 'package:squat_easy/se_main/se_mine/se_mine_base_page.dart';
import 'package:squat_easy/se_main/se_video/player/se_video_player_page.dart';
import 'package:squat_easy/se_route.dart';
import 'package:squat_easy/se_utils/se_time_utils.dart';
import 'package:squat_easy/se_voice_record/se_voice_record.dart';
import 'package:ylm_ui_kit/ylm_ui_kit.dart';

import 'se_history_logic.dart';

class SeHistoryPage extends StatefulWidget {
  const SeHistoryPage(this.logic, {Key? key}) : super(key: key);

  final SeHistoryLogic logic;

  @override
  State<SeHistoryPage> createState() => _SeHistoryPageState();
}

class _SeHistoryPageState extends State<SeHistoryPage> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return _SeHistoryPage(widget.logic);
  }

  @override
  bool get wantKeepAlive => true;
}

class _SeHistoryPage extends StatelessWidget {
  const _SeHistoryPage(this.logic);

  final SeHistoryLogic logic;

  @override
  Widget build(BuildContext context) {
    return SeMineBasePage(
      title: const ImageWidget.asset(Assets.pngTitleHistory, width: 290),
      showBack: false,
      child: GetBuilder<SeHistoryLogic>(
        builder: (logic) {
          return logic.videos.isEmpty
              ? _buildEmpty().center()
              : ListView.separated(
                  padding: EdgeInsets.only(bottom: 20.w),
                  itemCount: logic.videos.length,
                  itemBuilder: (BuildContext context, int index) => SeHistoryItem(logic.videos[index]),
                  separatorBuilder: (BuildContext context, int index) => SizedBox(height: 20.w),
                );
        },
      ),
    );
  }

  Widget _buildEmpty() => ImageWidget.asset(Assets.pngHomeEmpty, width: 145.w);
}

class SeHistoryItem extends StatelessWidget {
  const SeHistoryItem(this.video, {super.key});

  final Video video;

  @override
  Widget build(BuildContext context) {
    return ButtonWidget(
      onTap: () async {
        if (video.fileName.empty) return;
        SeRoute.open(SeVideoPlayerPage(await SeFileUtils.getVideoFilePath(video.fileName)));
      },
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 20.w),
        height: 142.w,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.pngHistoryItemBg),
            fit: BoxFit.fill,
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              children: [
                _buildTime(),
                const Spacer(),
                _buildIcon(),
              ],
            ).padding(left: 28.w, right: 36.w),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 10.w),
              height: 40.w,
              decoration: CommonDecoration.getShapeDecoration(bg: Colors.black, radius: 8.w),
              child: Row(
                children: [
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        _buildIconWhite(),
                        _buildNum().paddingLeft(13.w),
                        _buildText().paddingLeft(8.w),
                      ],
                    ),
                  ),
                  _buildSeparator(),
                  Expanded(child: _buildDuration().center()),
                ],
              ),
            ).paddingTop(28.w),
          ],
        ),
      ),
    );
  }

  Widget _buildTime() {
    String text = '';
    try {
      DateTime parsedDate = DateTime.parse(video.createTime);
      text = DateFormat('d MMMM yyyy', 'en_US').format(parsedDate);
    } catch (e) {}

    return TextWidget.oneLine(text: text, fontSize: 20);
  }

  Widget _buildIcon() => ImageWidget.asset(Assets.pngHistoryItemCamera, width: 21.w, height: 20.w);

  Widget _buildIconWhite() => ImageWidget.asset(Assets.pngHistoryItemCameraWhite, width: 21.w, height: 20.w);

  Widget _buildNum() => TextWidget.oneLine(text: video.num.toString(), fontSize: 18, color: Colors.white);

  Widget _buildText() => const TextWidget.oneLine(text: 'squat', fontSize: 12, color: Colors.white);

  Widget _buildSeparator() => Container(width: 1, height: 20.w, color: Colors.white);

  Widget _buildDuration() => TextWidget.oneLine(
        text: SeTimeUtils.formatSecondsToHMS(video.duration),
        fontSize: 18,
        color: Colors.white,
      );
}
